<template>
  <div class="classfiy">
    <div class="top">
      <el-button
        class="primary"
        icon="el-icon-plus"
        size="small"
        @click="goto('/manage/dashboard/add')"
        >新增商品</el-button
      >
    </div>
    <div class="tablist">
      <el-table
        ref="multipleTable"
        :data="goodslist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="goodsId" label="商品编号" width="120">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名" width="120">
        </el-table-column>
        <el-table-column
          prop="goodsIntro"
          label="商品简介"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="商品图片" width="120">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.goodsCoverImg"
              fit="scale-down"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="sellingPrice"
          label="商品售价"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="上架状态">
          <template slot-scope="scope">{{
            scope.row.goodsSellStatus ? "已下架" : "销售中"
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="goto('/manage/dashboard/add')"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="
                handleStatus(scope.row.goodsId, scope.row.goodsSellStatus)
              "
              >{{ scope.row.goodsSellStatus ? "上架" : "下架" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [],
      pagination: 1,
      //  商品列表
      total: 1,
      goodslist: [],
    };
  },
  created() {
    this.getgoods();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改商品的状态
    handleStatus(id, status) {
      console.log(id, status);
      // 状为1(true)代表下架0(false)代表上架
      if (status) {
        status = 0;
      } else {
        status = 1;
      }
      this.$request
        .put(
          `/goods/status/${status}`,
          {
            ids: id ? [id] : [],
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({data}) => {
          console.log('修改=',data);
          data.resultCode == 200
              ? this.$message({
                  message: "修改成功",
                  type: "success",
                })
              : this.$message({
                  message: data.message,
                  type: "warning",
                });
          data.resultCode == 200
              ?this.getgoods():"";
        });
    },
    // 增加或修改时跳转至添加商品页
    goto(url) {
      this.$router.push(url);
    },
    // 分页器页数改变时
    handleCurrentChange(val) {
      this.pagination = val;
      this.getgoods();
    },
    // 获取商品列表
    getgoods() {
      this.$request
        .get("/goods/list", {
          params: {
            pageNumber: this.pagination,
            pageSize: 10,
          },
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
          },
        })
        .then(({ data }) => {
          this.total = data.data.totalCount;
          this.goodslist = data.data.list;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.classfiy {
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .top {
    padding: 18px 20px;
    border: 1px solid #ebeef5;
    .primary {
      color: #fff;
      background-color: #1baeae;
      border-color: #1baeae;
    }
  }
  .tablist {
    padding: 20px;
  }
}
</style>
